/**
 * 个人中心 > 更换头像
 */
const BASE_URL = 'http://api-breakingnews-web.itheima.net'

// 第一个功能 : 获取个人头像
// 刚注册,还没有头像呢
// TODO :
axios
  .get(`${BASE_URL}/my/userinfo`, {
    headers: {
      Authorization: localStorage.getItem('token'),
    },
  })
  .then(res => {
    let { user_pic } = res.data.data

    if (user_pic) {
      $('#image').attr('src', user_pic)
    }

    handleCropper()
  })

function handleCropper() {
  // 第二个功能 : 选择图片
  // 一. 初始化裁剪插件
  const image = document.getElementById('image')
  let cropper = new Cropper(image, {
    aspectRatio: 1, // 裁剪图层的横纵比例
    preview: $('.img-preview'), // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
  })
  // 二. 点击选择图片
  $('.select').on('click', function () {
    $('#file').click()
  })

  $('#file').on('change', function () {
    // 获取图片文件
    let file = this.files[0]

    // 把图片文件转化为url , 因为裁剪工具就要一个url显示
    let url = URL.createObjectURL(file)

    // 把url赋值给 裁剪工具
    cropper.replace(url)
  })

  // 第三个功能 : 上传
  $('.sure').on('click', function () {
    /**
     * 1. cropper 插件转化base64 的步骤
     */
    //1.1 格式转换
    let canvas = cropper.getCroppedCanvas({
      // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
      width: 100,
      height: 100,
    })
    //1.2 canvas图像 -> base64字符串
    let base64Str = canvas.toDataURL('image/jpeg')
    //1.3 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
    base64Str = encodeURIComponent(base64Str)

    let data = `avatar=${base64Str}`

    // 2 上传图片 发送请求
    axios
      .post(`${BASE_URL}/my/update/avatar`, data, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(res => {
        console.log('上传图片的结果:', res)
        if (res.data.status === 0) {
          //3.1 弹框
          layer.msg('上传图片成功', {
            icon: 1,
            time: 2000, //2秒关闭（如果不配置，默认是3秒）
          })
          //3.2 获取首页的个人信息
          window.parent.mg_getUserInfo()
        }
      })
  })
}
